import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import { getToken } from '@/utils/storage'

Vue.use(VueRouter)

// 异步组件的写法，配合路由使用，该组件不会直接加载，会在路由被解析时才加载
const Detail = () => import('@/views/detail')
const Register = () => import('@/views/register')
const Login = () => import('@/views/login')
const Article = () => import('@/views/article')
const Collect = () => import('@/views/collect')
const Like = () => import('@/views/like')
const User = () => import('@/views/user')


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children: [
        {
          path: '/article',
          component: Article
        },
        {
          path: '/collect',
          component: Collect
        },
        {
          path: '/like',
          component: Like
        },
        {
          path: '/user',
          component: User
        }
      ]
    },
    {
      path: '/detail/:id',
      component: Detail
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/register',
      component: Register
    }
  ]
})

// 全局前置守卫：
// 1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
// 2. 只有全局前置守卫放行，才能看到真正的页面

// 任何路由，被解析访问前，都会先执行这个回调
// 1. form 你从哪里来，从哪来的路由信息对象
// 2. to 你往哪里去，到哪去的路由信息对象
// 3. next() 是否放行，如果next()调用，就是放行 => 放你想去的页面
// next(路径) 拦截到某个路径页面

// 白名单列表，记录无需权限访问的所有页面
const whileList = ['/login','/register']

router.beforeEach((to,from,next) => {
  const token = getToken()
  // 如果有token直接放行
  if (token) {
    next()
  } else {
    // 没有token的人，看看你要去哪
    // 判断白名单中是否存在
    if (whileList.includes(to.path)) {
      next()
    } else {
      // 否者拦截到登陆
      next('/login')
    }
  }
})

export default router
